<template>
  <div class="searchBox">
    <!-- 搜索条件 -->
    <div class="search" :style="{ flexWrap: queryItem.length > 5 ? 'wrap' : '' }">
      <div class="item" v-for="(item, index) in queryItem" :key="'a' + index">
        <div class="label">{{ item.label }}</div>
        <!-- 输入框 -->
        <el-input v-if="item.type === 'Input'" v-model="queryData[item.prop]" placeholder="请输入内容" clearable>
        </el-input>
        <!-- 日期 -->
        <el-date-picker v-if="item.type === 'Date'" v-model="queryData[item.prop]" type="date" placeholder="请选择日期"
          clearable value-format="yyyy-MM-dd">
        </el-date-picker>
        <!-- 下拉框 -->
        <el-select v-if="item.type === 'Select'" v-model="queryData[item.prop]" placeholder="请选择内容" clearable>
          <el-option class="option" v-for="opt in item.options" :key="opt.value" :label="opt.label" :value="opt.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 搜索按钮 -->
    <div class="btnBox">
      <div class="btn" v-for="(btn, idx) in queryHandle" :key="'b' + idx">
        <el-button :type="btn.type" size="mini" round @click="btn.handle(queryData)">{{ btn.label }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    queryData: {
      type: Object,
      default: () => { }
    },
    queryItem: {
      type: Array,
      default: () => []
    },
    queryHandle: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formData: this.queryData
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  updated() { },
  methods: {

  },
  filters: {},
}
</script>

<style lang="scss" scoped>
.searchBox {
  background-color: #FFFFFF;
  margin-bottom: 15px;
  padding: 15px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search {
  display: flex;
  align-items: center;

  .item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    padding: 5px 0;

    .label {
      width: 80px;
      text-align: center;
    }
  }
}

.btnBox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 20px;

  .btn {
    display: flex;
    flex-direction: column;
    margin-left: 20px;

    &:nth-child(1) {
      margin-left: 0px;
    }
  }
}
</style>